<template>
	<el-dialog title="评价" :visible.sync="centerDialogVisible" width="800px">
		<div>
			<vue-scroll :ops="ops" style="width:100%;height:330px">
				<div class="mainBox">
					<div class="txtPicBox">
						<div class="myrandomlyTxt flex">
							<p>{{ itemData.date }}</p>
							<span class="siteTxt">{{ itemData.attributionName }}</span>
						</div>
						<div class="imagesBox">
							<div class="imagesBoxList" v-for="item in 11">
								<el-checkbox  v-if="!upgradeNav" class="imageChecked"></el-checkbox>
								<el-image class="imgSize" :src="require('@/assets/image/management/guo.png')" fit="cover" alt=""></el-image>
							</div>
						</div>
					</div>
				</div>
			</vue-scroll>
			<div class="textareaBox">
				<el-input type="textarea" placeholder="请写下您的评价吧..." resize="none"></el-input>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<!-- <el-button @click="centerDialogVisible = false">取 消</el-button> -->
			<el-button type="primary" class="textareaBoxBtn" round @click="centerDialogVisible = false">发表</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		props:['dataMap','itemData'],
		data() {
			return {
				// 滚动条样式设置
				ops: {
					vuescroll: {},
					scrollPanel: {},
					rail: {
						keepShow: true
					},
					bar: {
						hoverStyle: true,
						onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
						background: "#D6D8DD", //滚动条颜色
						opacity: 0.9, //滚动条透明度
						"overflow-x": "hidden"
					}
				},
				centerDialogVisible: true,
				upgradeNav: false,
				imagesListData: []
			}
		},
		mounted() {
			
			// console.log(this.dataMap, this.itemData)
			this.loadMapData()
		},
		methods: {
			loadMapData(){
				// 加载map数据
				console.log(this.dataMap)
				
			}
		}
	}
</script>

<style scoped="scoped">
	/**主体内容 */
	.flex {
		display: flex;
		flex-wrap: nowrap;
	}
	.mainBox {
		width: 100%;
		background-color: #fff;
	}
	
	.txtPicBox {
		width: 100%;
		height: auto;
		box-sizing: border-box;
	}
	
	.myrandomlyTxt {
		position: relative;
		line-height: 15px;
		text-align: center;
	}
	
	.myrandomlyTxt>p {
		/* width: 120px; */
		line-height: 15px;
		text-align: left;
		color: #333;
		font-size: 12px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		margin-right: 20px;
	}
	
	.siteTxt {
		box-sizing: border-box;
		color: #AAAAAA;
		color: #aaa;
		font-size: 12px;
	}
	
	.imagesBox{
		padding: 15px 0;
	}
	.imagesBoxList{
		position: relative;
		display: inline-block;
		margin-left: 2px;
		margin-bottom: 2px;
	}
	.imageChecked{
		position: absolute;
		top: 8px;
		left: 8px;
	}
	.imgSize {
		width: 148px;
		height: 148px;
		cursor: pointer;
	}
	.imagesBoxList>>>.el-checkbox__input .el-checkbox__inner{
		background-color: rgba(0,0,0,0.3);
	}
	.imagesBoxList>>>.el-checkbox__input.is-checked .el-checkbox__inner{
		background-color: #23B14D !important;
	}
	
	.textareaBox{
		margin-top: 30px;
	}
	.textareaBox>>>textarea.el-textarea__inner{
		height: 200px;
	}
	.textareaBoxBtn{
		width: 200px;
	}
</style>
<style>
	.el-dialog__footer{
		text-align: center;
	}
</style>